<template>
    <div>
        <p>网址：<input type="text" v-model="reportUrl"></p>
        <iframe v-if="reportType==0" id="child" v-bind:src="reportUrl" frameborder="0" crolling="auto"/>

        <div v-if="reportType==1" v-html="htmlContent" crolling="auto"></div>
    </div>
</template>

<script>
  export default {
    mounted() {
      /**
       * iframe-宽高自适应显示
       */
      function changeMobsfIframe() {
        const mobsf = document.getElementById('child')
        // const deviceWidth = document.body.clientWidth
        const deviceHeight = document.body.clientHeight
        // mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 数字是页面布局宽度差值
        mobsf.style.height = (Number(deviceHeight) - 111) + 'px' // 数字是页面布局高度差
      }

      changeMobsfIframe()

      window.onresize = function() {
        changeMobsfIframe()
      }
    },

    data() {
      return {
        htmlContent: '',
        reportUrl: 'http://www.bzchao.com',
        reportType: ''
      }
    },
    created() {
      // this.fileName = '../static/file/' + this.$route.params.report_url
      this.reportUrl = this.$route.params.reportUrl || this.reportUrl
      this.reportType = this.$route.params.reportType || this.reportType
      if (this.reportType === 1) {
        console.log('获取内容')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    #child {
        float: left;
        bottom: 10px;
        width: 100%;
        top: 80px;
        left: 30px;
        border: solid 1px;
    }
</style>